<template>
  <q-dialog
    v-model="visible"
    transition-show="rotate"
    transition-hide="rotate"
    @hide="hide"
  >
    <q-card class="login-container">
      <q-card-section>
        <div class="float-right close-btn">
          <q-icon size="20px" @click="hide()" name="mdi-close-thick" />
        </div>
        <div class="card-title">欢迎登录</div>
        <q-form @submit="onSubmit()" @reset="onReset">
          <q-input
            dense
            filled
            v-model="account"
            label="账号"
            :rules="[val => (val && val.length > 0) || '账号不能为空']"
          >
            <template v-slot:prepend>
              <q-icon name="mdi-account" />
            </template>
          </q-input>
          <q-input
            filled
            dense
            v-model="password"
            type="password"
            label="密码"
            :rules="[val => (val && val.length > 0) || '密码不能为空']"
          >
            <template v-slot:prepend>
              <q-icon name="mdi-lock-check" />
            </template>
          </q-input>

          <div class=""><q-toggle v-model="rememberMe" label="记住我" /></div>
          <div class="submit">
            <q-btn label="登录" type="submit" color="primary" />
          </div>

          <div class="social">
            <div class="title">
              <div class="line"></div>
              <div class="text-subtitle1 text">其他登录方式</div>
              <div class="line"></div>
            </div>
            <div class="content">
              <q-icon @click="gitee">
                <svg
                  data-v-0ed59873=""
                  aria-hidden="true"
                  class="svg-icon"
                  style="width: 30px; height: 30px;"
                >
                  <use xlink:href="#icon-gitee">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      id="icon-gitee"
                    >
                      <path
                        d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z"
                        fill="#d81e06"
                        p-id="2709"
                      ></path>
                    </svg>
                  </use></svg
              ></q-icon>
              <q-icon
                ><svg
                  data-v-0ed59873=""
                  aria-hidden="true"
                  class="svg-icon"
                  style="width: 30px; height: 30px;"
                >
                  <use xlink:href="#icon-qq">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      id="icon-qq"
                    >
                      <path
                        d="M511.09761 957.257c-80.159 0-153.737-25.019-201.11-62.386-24.057 6.702-54.831 17.489-74.252 30.864-16.617 11.439-14.546 23.106-11.55 27.816 13.15 20.689 225.583 13.211 286.912 6.767v-3.061z"
                        fill="#FAAD08"
                        p-id="12103"
                      ></path>
                      <path
                        d="M496.65061 957.257c80.157 0 153.737-25.019 201.11-62.386 24.057 6.702 54.83 17.489 74.253 30.864 16.616 11.439 14.543 23.106 11.55 27.816-13.15 20.689-225.584 13.211-286.914 6.767v-3.061z"
                        fill="#FAAD08"
                        p-id="12104"
                      ></path>
                      <path
                        d="M497.12861 474.524c131.934-0.876 237.669-25.783 273.497-35.34 8.541-2.28 13.11-6.364 13.11-6.364 0.03-1.172 0.542-20.952 0.542-31.155C784.27761 229.833 701.12561 57.173 496.64061 57.162 292.15661 57.173 209.00061 229.832 209.00061 401.665c0 10.203 0.516 29.983 0.547 31.155 0 0 3.717 3.821 10.529 5.67 33.078 8.98 140.803 35.139 276.08 36.034h0.972z"
                        fill="#000000"
                        p-id="12105"
                      ></path>
                      <path
                        d="M860.28261 619.782c-8.12-26.086-19.204-56.506-30.427-85.72 0 0-6.456-0.795-9.718 0.148-100.71 29.205-222.773 47.818-315.792 46.695h-0.962C410.88561 582.017 289.65061 563.617 189.27961 534.698 185.44461 533.595 177.87261 534.063 177.87261 534.063 166.64961 563.276 155.56661 593.696 147.44761 619.782 108.72961 744.168 121.27261 795.644 130.82461 796.798c20.496 2.474 79.78-93.637 79.78-93.637 0 97.66 88.324 247.617 290.576 248.996a718.01 718.01 0 0 1 5.367 0C708.80161 950.778 797.12261 800.822 797.12261 703.162c0 0 59.284 96.111 79.783 93.637 9.55-1.154 22.093-52.63-16.623-177.017"
                        fill="#000000"
                        p-id="12106"
                      ></path>
                      <path
                        d="M434.38261 316.917c-27.9 1.24-51.745-30.106-53.24-69.956-1.518-39.877 19.858-73.207 47.764-74.454 27.875-1.224 51.703 30.109 53.218 69.974 1.527 39.877-19.853 73.2-47.742 74.436m206.67-69.956c-1.494 39.85-25.34 71.194-53.24 69.956-27.888-1.238-49.269-34.559-47.742-74.435 1.513-39.868 25.341-71.201 53.216-69.974 27.909 1.247 49.285 34.576 47.767 74.453"
                        fill="#FFFFFF"
                        p-id="12107"
                      ></path>
                      <path
                        d="M683.94261 368.627c-7.323-17.609-81.062-37.227-172.353-37.227h-0.98c-91.29 0-165.031 19.618-172.352 37.227a6.244 6.244 0 0 0-0.535 2.505c0 1.269 0.393 2.414 1.006 3.386 6.168 9.765 88.054 58.018 171.882 58.018h0.98c83.827 0 165.71-48.25 171.881-58.016a6.352 6.352 0 0 0 1.002-3.395c0-0.897-0.2-1.736-0.531-2.498"
                        fill="#FAAD08"
                        p-id="12108"
                      ></path>
                      <path
                        d="M467.63161 256.377c1.26 15.886-7.377 30-19.266 31.542-11.907 1.544-22.569-10.083-23.836-25.978-1.243-15.895 7.381-30.008 19.25-31.538 11.927-1.549 22.607 10.088 23.852 25.974m73.097 7.935c2.533-4.118 19.827-25.77 55.62-17.886 9.401 2.07 13.75 5.116 14.668 6.316 1.355 1.77 1.726 4.29 0.352 7.684-2.722 6.725-8.338 6.542-11.454 5.226-2.01-0.85-26.94-15.889-49.905 6.553-1.579 1.545-4.405 2.074-7.085 0.242-2.678-1.834-3.786-5.553-2.196-8.135"
                        fill="#000000"
                        p-id="12109"
                      ></path>
                      <path
                        d="M504.33261 584.495h-0.967c-63.568 0.752-140.646-7.504-215.286-21.92-6.391 36.262-10.25 81.838-6.936 136.196 8.37 137.384 91.62 223.736 220.118 224.996H506.48461c128.498-1.26 211.748-87.612 220.12-224.996 3.314-54.362-0.547-99.938-6.94-136.203-74.654 14.423-151.745 22.684-215.332 21.927"
                        fill="#FFFFFF"
                        p-id="12110"
                      ></path>
                      <path
                        d="M323.27461 577.016v137.468s64.957 12.705 130.031 3.91V591.59c-41.225-2.262-85.688-7.304-130.031-14.574"
                        fill="#EB1C26"
                        p-id="12111"
                      ></path>
                      <path
                        d="M788.09761 432.536s-121.98 40.387-283.743 41.539h-0.962c-161.497-1.147-283.328-41.401-283.744-41.539l-40.854 106.952c102.186 32.31 228.837 53.135 324.598 51.926l0.96-0.002c95.768 1.216 222.4-19.61 324.6-51.924l-40.855-106.952z"
                        fill="#EB1C26"
                        p-id="12112"
                      ></path>
                    </svg>
                  </use></svg
              ></q-icon>
              <q-icon @click="github"
                ><svg
                  data-v-0ed59873=""
                  aria-hidden="true"
                  class="svg-icon"
                  style="width: 30px; height: 30px;"
                >
                  <use xlink:href="#icon-github">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      id="icon-github"
                    >
                      <path
                        d="M512 42.666667A464.64 464.64 0 0 0 42.666667 502.186667 460.373333 460.373333 0 0 0 363.52 938.666667c23.466667 4.266667 32-9.813333 32-22.186667v-78.08c-130.56 27.733333-158.293333-61.44-158.293333-61.44a122.026667 122.026667 0 0 0-52.053334-67.413333c-42.666667-28.16 3.413333-27.733333 3.413334-27.733334a98.56 98.56 0 0 1 71.68 47.36 101.12 101.12 0 0 0 136.533333 37.973334 99.413333 99.413333 0 0 1 29.866667-61.44c-104.106667-11.52-213.333333-50.773333-213.333334-226.986667a177.066667 177.066667 0 0 1 47.36-124.16 161.28 161.28 0 0 1 4.693334-121.173333s39.68-12.373333 128 46.933333a455.68 455.68 0 0 1 234.666666 0c89.6-59.306667 128-46.933333 128-46.933333a161.28 161.28 0 0 1 4.693334 121.173333A177.066667 177.066667 0 0 1 810.666667 477.866667c0 176.64-110.08 215.466667-213.333334 226.986666a106.666667 106.666667 0 0 1 32 85.333334v125.866666c0 14.933333 8.533333 26.88 32 22.186667A460.8 460.8 0 0 0 981.333333 502.186667 464.64 464.64 0 0 0 512 42.666667"
                        fill="#231F20"
                        p-id="16427"
                      ></path>
                    </svg>
                  </use></svg
              ></q-icon>
              <q-icon @click="weibo"
                ><svg
                  data-v-0ed59873=""
                  aria-hidden="true"
                  class="svg-icon"
                  style="width: 30px; height: 30px;"
                >
                  <use xlink:href="#icon-weibo">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      id="icon-weibo"
                    >
                      <path
                        d="M851.4 590.193c-22.196-66.233-90.385-90.422-105.912-91.863-15.523-1.442-29.593-9.94-19.295-27.505 10.302-17.566 29.304-68.684-7.248-104.681-36.564-36.14-116.512-22.462-173.094 0.866-56.434 23.327-53.39 7.055-51.65-8.925 1.89-16.848 32.355-111.02-60.791-122.395C311.395 220.86 154.85 370.754 99.572 457.15 16 587.607 29.208 675.873 29.208 675.873h0.58c10.009 121.819 190.787 218.869 412.328 218.869 190.5 0 350.961-71.853 398.402-169.478 0 0 0.143-0.433 0.575-1.156 4.938-10.506 8.71-21.168 11.035-32.254 6.668-26.205 11.755-64.215-0.728-101.66z m-436.7 251.27c-157.71 0-285.674-84.095-285.674-187.768 0-103.671 127.82-187.76 285.674-187.76 157.705 0 285.673 84.089 285.673 187.76 0 103.815-127.968 187.768-285.673 187.768z"
                        fill="#E71F19"
                        p-id="13809"
                      ></path>
                      <path
                        d="M803.096 425.327c2.896 1.298 5.945 1.869 8.994 1.869 8.993 0 17.7-5.328 21.323-14.112 5.95-13.964 8.993-28.793 8.993-44.205 0-62.488-51.208-113.321-114.181-113.321-15.379 0-30.32 3.022-44.396 8.926-11.755 4.896-17.263 18.432-12.335 30.24 4.933 11.662 18.572 17.134 30.465 12.238 8.419-3.46 17.268-5.33 26.41-5.33 37.431 0 67.752 30.241 67.752 67.247 0 9.068-1.735 17.857-5.369 26.202a22.832 22.832 0 0 0 12.335 30.236l0.01 0.01z"
                        fill="#F5AA15"
                        p-id="13810"
                      ></path>
                      <path
                        d="M726.922 114.157c-25.969 0-51.65 3.744-76.315 10.942-18.423 5.472-28.868 24.622-23.5 42.91 5.509 18.29 24.804 28.657 43.237 23.329a201.888 201.888 0 0 1 56.578-8.064c109.253 0 198.189 88.271 198.189 196.696 0 19.436-2.905 38.729-8.419 57.16-5.508 18.289 4.79 37.588 23.212 43.053 3.342 1.014 6.817 1.442 10.159 1.442 14.943 0 28.725-9.648 33.37-24.48 7.547-24.906 11.462-50.826 11.462-77.175-0.143-146.588-120.278-265.813-267.973-265.813z"
                        fill="#F5AA15"
                        p-id="13811"
                      ></path>
                      <path
                        d="M388.294 534.47c-84.151 0-152.34 59.178-152.34 132.334 0 73.141 68.189 132.328 152.34 132.328 84.148 0 152.337-59.182 152.337-132.328 0-73.15-68.19-132.334-152.337-132.334zM338.53 752.763c-29.454 0-53.39-23.755-53.39-52.987 0-29.228 23.941-52.989 53.39-52.989 29.453 0 53.39 23.76 53.39 52.989 0 29.227-23.937 52.987-53.39 52.987z m99.82-95.465c-6.382 11.086-19.296 15.696-28.726 10.219-9.43-5.323-11.75-18.717-5.37-29.803 6.386-11.09 19.297-15.7 28.725-10.224 9.43 5.472 11.755 18.864 5.37 29.808z"
                        fill="#040000"
                        p-id="13812"
                      ></path>
                    </svg>
                  </use></svg
              ></q-icon>
            </div>
          </div>
        </q-form>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
import { mixins } from 'vue-class-component';
import CommonMixin from 'src/mixin/common';
import oauthApi from 'src/api/oauth/index';
import { init } from 'src/utils/initStore';
@Component({
  mounted() {}
})
export default class LoginDialog extends mixins(CommonMixin) {
  private account: string = '';

  private password: string = '';

  private rememberMe: boolean = true;

  private visible: boolean = false;

  @Watch('loginDialogVisible')
  handleVisible(val: boolean) {
    this.visible = val;
    if (this.visible) {
      window.addEventListener('storage', this.handleStorageChanged);
    } else {
      window.removeEventListener('storage', this.handleStorageChanged);
    }
  }

  public handleStorageChanged(event: StorageEvent) {
    if (event.key == 'PROFILE') {
      init(this.$store);
    }
  }

  public async onSubmit(): Promise<void> {
    const res = await this.$store.dispatch('login/login', {
      account: this.account,
      password: this.password
    });
    if (res) {
      this.hide();
    } else {
      console.log(res);
    }
  }

  public onReset(): void {
    this.account = '';
    this.password = '';
    this.rememberMe = false;
  }

  public hide() {
    this.$store.commit('global/SET_LOGIN_DIALOG_VISIBLE', false);
  }

  public async gitee() {
    localStorage.setItem('AUTH_SOURCE', 'gitee');
    const res = await oauthApi.gitee();
    if (res.success) {
      const url = res.data;
      window.open(url);
    }
  }

  public async weibo() {
    localStorage.setItem('AUTH_SOURCE', 'weibo');
    const res = await oauthApi.weibo();
    if (res.success) {
      const url = res.data;
      window.open(url);
    }
  }

  public async github() {
    localStorage.setItem('AUTH_SOURCE', 'github');
    const res = await oauthApi.github();
    if (res.success) {
      const url = res.data;
      window.open(url);
    }
  }
}
</script>
<style lang="scss" scoped>
.login-container {
  background: white;
  padding: 20px;
  width: 400px;
  .close-btn {
    cursor: pointer;
  }
  .card-title {
    text-align: center;
    margin: 10px;
    padding-bottom: 20px;
    font-size: 16px;
    font-weight: 700;
  }
  .submit {
    display: flex;
    justify-content: center;
    button {
      width: 100%;
    }
  }
  .social {
    margin: 10px;

    .title {
      display: flex;
      text-align: center;
      justify-content: center;
      align-items: center;
      .text {
        min-width: 120px;
        font-size: 12px;
      }
      .line {
        width: 100%;
        background: #dad9d9;
        height: 1px;
      }
    }
    .content {
      padding: 10px;
      display: flex;
      justify-content: center;
      i {
        font-size: 30px;
        margin-right: 10px;
        cursor: pointer;
        transition: 0.3s;
      }
    }
  }
}
</style>
